/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Drawer, Row, Col, Space, Form, Input, Select, Button } from 'antd';
import { useTranslation } from 'react-i18next';
import ModalHOC, { ModalWrapProps } from '@/components/ModalHOC';

interface Props {
  field: {
    name: string;
    type: string;
  };
  values: any;
  onOk: (values: any) => void;
}

function EditField(props: Props & ModalWrapProps) {
  const { t } = useTranslation('es-index-patterns');
  const { visible, destroy, field, values, onOk } = props;
  const [form] = Form.useForm();
  const formatType = Form.useWatch(['formatMap', field.name, 'type'], form);
  const formatTypeOptions = [
    {
      label: 'URL',
      value: 'url',
    },
  ];

  if (field.type === 'date') {
    formatTypeOptions.unshift({
      label: 'Date',
      value: 'date',
    });
  }

  return (
    <Drawer
      width={1000}
      destroyOnClose
      title={
        <Space data-oid='9.m-r6y'>
          {t('field.edit_title')}
          <strong data-oid='cppht7c'>{field.name}</strong>
        </Space>
      }
      visible={visible}
      onClose={destroy}
      data-oid='ewox:8h'
    >
      <Row gutter={32} data-oid='x26ee.b'>
        <Col span={12} data-oid='oa4wboh'>
          <Form
            layout='vertical'
            form={form}
            initialValues={values}
            onFinish={(values) => {
              onOk(values);
              destroy();
            }}
            data-oid='5xfpxdp'
          >
            <Form.Item label={t('field.type')} data-oid='6eb5fqn'>
              <Input value={field.type} disabled data-oid='jshi23q' />
            </Form.Item>
            <Form.Item label={t('field.alias')} name={['attrs', field.name, 'alias']} tooltip={t('field.alias_tip')} data-oid='px9l4hv'>
              <Input data-oid='-z1ile_' />
            </Form.Item>

            <Form.Item label={t('field.format.type')} name={['formatMap', field.name, 'type']} data-oid='ipjzp.g'>
              <Select allowClear options={formatTypeOptions} data-oid='cocln-3' />
            </Form.Item>
            {formatType === 'date' && (
              <Form.Item
                label={t('field.format.params.date.pattern')}
                name={['formatMap', field.name, 'params', 'pattern']}
                tooltip={t('field.format.params.date.pattern_tip')}
                initialValue='YYYY-MM-DD HH:mm:ss.SSS'
                data-oid='5vfsvo5'
              >
                <Input placeholder={t('field.format.params.date.pattern_placeholder')} data-oid='4egy843' />
              </Form.Item>
            )}
            {formatType === 'url' && (
              <>
                <Form.Item
                  label={t('field.format.params.url.urlTemplate')}
                  name={['formatMap', field.name, 'params', 'urlTemplate']}
                  tooltip={{
                    title: (
                      <div data-oid=':qs1fa7'>
                        {t('field.format.params.url.urlTemplateTip', { skipInterpolation: true })}
                        <div data-oid='zgb8uxo'>{t('field.format.params.url.urlTemplateTip1', { skipInterpolation: true })}</div>
                      </div>
                    ),

                    overlayInnerStyle: { width: 550 },
                  }}
                  data-oid='vmefz44'
                >
                  <Input placeholder={t('field.format.params.url.urlTemplatePlaceholder', { skipInterpolation: true })} data-oid='crto3m1' />
                </Form.Item>
                <Form.Item
                  label={t('field.format.params.url.labelTemplate')}
                  name={['formatMap', field.name, 'params', 'labelTemplate']}
                  initialValue='{{value}}'
                  data-oid='5sfajoc'
                >
                  <Input placeholder={t('field.format.params.url.labelTemplatePlaceholder', { skipInterpolation: true })} data-oid='fffn77q' />
                </Form.Item>
              </>
            )}

            <Form.Item data-oid='0od6ici'>
              <Button type='primary' htmlType='submit' data-oid='_j5j-hp'>
                {t('common:btn.save')}
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </Drawer>
  );
}

export default ModalHOC<Props>(EditField);
